import {
  LockTwoTone,
  UserOutlined,
} from '@ant-design/icons';
import {  Tabs } from 'antd';
import React ,{useEffect} from 'react';
import ProForm, {  ProFormText } from '@ant-design/pro-form';
import { connect, Dispatch,history} from 'umi';
import { StateType } from '@/models/login';
import { LoginParamsType } from '@/services/login';
import { ConnectState } from '@/models/connect';

import styles from './index.less';

interface LoginProps {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
}


const Login: React.FC<LoginProps> = (props) => {
  useEffect(()=>{
    //如果已经登录过，直接去首页
    const userInfo=localStorage.getItem('userInfo')
    if(userInfo) history.replace('/')
  })
  const { submitting } = props;

  const handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values},
    });
  };
  return (
    <div className={styles.main}>
      <ProForm
        initialValues={{
          autoLogin: true,
        }}
        submitter={{
          render: (_, dom) => dom.pop(),
          submitButtonProps: {
            loading: submitting,
            size: 'large',
            style: {
              width: '100%',
            },
          },
        }}
        onFinish={async (values) => {
          handleSubmit(values);
        }}
      >
        <Tabs activeKey='account'>
          <Tabs.TabPane
            key="account"
            tab='账户密码登录'
          />
        </Tabs>
            <ProFormText
              name="email"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
              placeholder='请输入邮箱'
              rules={[
                {
                  required: true,
                  message:'请输入邮箱!'
                },
                {
                  type:'email',
                  message:'请输入正确的邮箱格式'
                }
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockTwoTone className={styles.prefixIcon} />,
              }}
              placeholder='请输入密码'
              rules={[
                {
                  required: true,
                  message:'请输入密码!'
                },
              ]}
            />
      </ProForm>
     
    </div>
  );
};

export default connect(({ login, loading }: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
